<template>
  <div class="article-detail-page">
    <nav class="nav"><span class="back">&lt;</span> 面经详情</nav>
    <header class="header">
      <h1>百度前端面经</h1>
      <p>2022-01-20 | 315 浏览量 | 44 点赞数</p>
      <p>
        <img
          src="http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png"
          alt=""
        />
        <span>青春少年</span>
      </p>
    </header>
    <main class="body">
      虽然百度这几年发展势头落后于AT, 甚至快被京东赶上了,毕竟瘦死的骆驼比马大,
      面试还是相当有难度和水准的, 一面.....
    </main>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
 
// 使用 useRoute 钩子来获取当前路由实例
const route = useRoute();
 
// 在组件挂载时（相当于 Vue 2 的 created 钩子）获取文章详情
onMounted(async () => {
  try {
    // 从路由查询参数中获取 id
    const articleId = route.query.id;
    
    // 检查 id 是否存在
    if (!articleId) {
      console.error('Article ID is missing from route query parameters.');
      return;
    }
    
    // 使用 id 发起 GET 请求获取文章详情
    const response = await axios.get(`https://mock.boxuegu.com/mock/3083/articles/${articleId}`);
    
    // 你可以在这里处理响应数据，例如将其存储在响应式变量中
    // 注意：在这个例子中，我没有创建响应式变量来存储文章详情，
    // 因为你的原始 Vue 2 组件中也没有这样做。如果你需要的话，
    // 可以使用 ref 或 reactive 来创建一个响应式变量。
    console.log(response.data);
    
  } catch (error) {
    console.error('Failed to fetch article details:', error);
  }
});
</script>

<style lang="less" scoped>
.article-detail-page {
  .nav {
    height: 44px;
    border-bottom: 1px solid #e4e4e4;
    line-height: 44px;
    text-align: center;
    .back {
      font-size: 18px;
      color: #666;
      position: absolute;
      left: 10px;
      top: 0;
      transform: scale(1, 1.5);
    }
  }
  .header {
    padding: 0 15px;
    p {
      color: #999;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .body {
    padding: 0 15px;
  }
}
</style>